<template>
    <div class="main">
        <top></top>
        <div class="Hydro">
        <div class="middle"  >
            <img src="../assets/img/hydroImg/title2.png" alt="" class="title2 animated rotateIn" id="middle-title2">
            <img src="../assets/img/hydroImg/title3.png" alt="" class="title3 animated lightSpeedIn"  id="middle-title3">
        </div>
        </div>
        <div class="enter" id="enter">
            <div class="middle " id="yourElement">
                <img src="../assets/img/enterImg/title2.png" alt="" class="title2" id="title2">
                <div class="middle-box">
                    <div class="middle-box-picture">
                        <img src="../assets/img/enterImg/box1.png" alt="" id="p1" class="middle-box-picture-img">
                        <img src="../assets/img/enterImg/box2.png" alt="" style="margin-left: 218px" id="p2" class="middle-box-picture-img">
                        <img src="../assets/img/enterImg/box3.png" alt="" style="margin-left: 252px" id="p3" class="middle-box-picture-img">
                        <img src="../assets/img/enterImg/box4.png" alt="" style="margin-left: 257px" id="p4" class="middle-box-picture-img">
                    </div>
                    <div class="middle-box-words">
                        <img src="../assets/img/enterImg/w1.png" alt="" id="w1">
                        <img src="../assets/img/enterImg/w2.png" alt="" style="margin-left: 134px" id="w2">
                        <img src="../assets/img/enterImg/w3.png" alt="" style="margin-left: 133px;margin-top: 20px" id="w3">
                        <img src="../assets/img/enterImg/w4.png" alt="" style="margin-left: 134px" id="w4">
                    </div>
                </div>
            </div>
        </div>
        <bottom></bottom>
    </div>
</template>

<script>
    import $ from 'jquery'
    import top from './top'
    import bottom from './bottom'
    export default {
        name: "hydro",
        components:{
            top,
            bottom
        },
        data(){
          return{
              flag: true,
          }
        },
        methods:{
            jump(){
                window.location.href = "https://github.com/hydro-offical/hydro"
            },
            changeurl(){
                this.flag = !this.flag
            },
            enterApp(){
                this.$router.push({
                    name:'Show'
                })
            },
        },
        mounted() {
            var pagewin = $(window).width();
            var pagehei = $(window).height();
            $('body').css({ "width": pagewin }).css({ "height": pagehei });
            var len = 2
            var num = 0;
            var numjia = 0;
            var done = true;
            for (var i = 0; i < len; i++) {
                $('.pagination').append("<li></li>")
            }
            $('.pagination').find('li').eq(0).addClass('active');
            $('.pagination li').click(function () {
                num = $(this).index();
                $('.main').stop().animate({ marginTop: -num * pagehei }, 1000);
                $('.pagination').find('li').eq(num).addClass('active').siblings().removeClass('active');
            });
            function xia() {
                if (num < len - 1 && done) {//不在最后一页的时候
                    num++;
                    numjia++;
                    done = false;
                    if (numjia === 1) {//只有在滚轮滚动一次时才执行下面的。
                        $('.main').stop().animate({ marginTop: -num * pagehei }, 1000, function () { done = true; numjia = 0; });
                        $('#title2').addClass('animated bounceInUp');
                        $('#p1').addClass('animated bounceInLeft');
                        $('#p2').addClass('animated bounceInLeft');
                        $('#p3').addClass('animated bounceInLeft');
                        $('#p4').addClass('animated bounceInLeft')
                        $('#enter').addClass('animated fadeIn')
                    }
                } else if (done) {//在最后一页的时候
                    num = 0;
                    numjia++;
                    done = false;
                    if (numjia === 1) {//只有在滚轮滚动一次时才执行下面的。
                        $('.main').stop().animate({ marginTop: -num * pagehei }, 1000, function () { done = true; numjia = 0; });
                    }
                }
            }
            function shang() {
                if (num > 0 && done) {//不在第一页的时候
                    num--;
                    numjia++;
                    done = false;
                    if (numjia === 1) {//只有在滚轮滚动一次时才执行下面的。
                        $('.main').stop().animate({ marginTop: -num * pagehei }, 1000, function () { done = true; numjia = 0; });
                    }
                } else if (done) {//在第一页的时候
                    // num = len - 1;
                    numjia++;
                    done = false;
                    if (numjia === 1) {//只有在滚轮滚动一次时才执行下面的。
                        $('.main').stop().animate({ marginTop: -num * pagehei }, 1000, function () { done = true; numjia = 0; });
                        $('#title2').addClass('animated bounceInUp');
                        $('#p1').addClass('animated slideInLeft');
                        $('#p2').addClass('animated slideInLeft');
                        $('#p3').addClass('animated slideInLeft');
                        $('#p4').addClass('animated slideInLeft')
                    }
                }
            }
            function scrollFunc(e) {
                e = e || window.event; //给e赋值event对象
                if (e.wheelDelta) {//IE/Opera/Chrome 情况时执行
                    if (e.wheelDelta <= -120) {//判断滚轮是否下滚
                        xia();
                    } else if (e.wheelDelta >= 120) {//判断滚轮是否往上滚动
                        shang();
                    }
                } else if (e.detail) {//火狐 情况时执行
                    if (e.detail >= 3) {//滚轮往下滚动时
                        xia();
                    } else if (e.detail <= -3) {//判断滚轮是否往上滚动
                        shang();
                    }
                }
                $('.pagination').find('li').eq(num).addClass('active').siblings().removeClass('active');
            }
            if (document.addEventListener) {
                document.addEventListener('DOMMouseScroll', scrollFunc, false);
            }
            window.onmousewheel = document.onmousewheel = scrollFunc;

        }

    }
</script>

<style lang="less">
    #yourElement{
        animate-duration:  15s;    //动画持续时间
        animate-delay: 15s;    //动画延迟时间
    }
    *::-webkit-scrollbar {
        display: none;
    }
    html,body,template{
        width: 100%;
        height: 100%;
    }
    .main{
        display: flex;
        flex-direction: column;
        align-items: center;
        .pagination {
            position: fixed;
            top: 50%;
            right: 10px;
            z-index: 2;
            transform: translateY(-50%);
        }

        .pagination li {
            margin-top: 4px;
            width: 4px;
            height: 4px;
            padding: 10px;
            cursor: pointer;
        }

        .pagination li:before {
            content: ''
        ;
            display: block;
            position: absolute;
            width: 4px;
            height: 4px;
            background-color: #333;
            border-radius: 50%;
        }

        .pagination li.active:before {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid #333;
            background: none;
            left: 6px;
        }
        .Hydro {
            background:  url("../assets/img/hydroImg/lan2.png")no-repeat bottom right,url("../assets/img/hydroImg/huang2.png") no-repeat bottom, #040F41;
            opacity: 1;
            margin:0px;
            width:100%;
            min-width:1920px;
            max-width:100%;
            height:971px;
            min-height:937px;
            position:page;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .middle{
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 700px;
                .title2{
                    margin-top: 193px;
                    width: 364px;
                    height: 155px;
                }
                .title3{
                    margin-top: 18px;
                    width: 724px;
                    height: 36px;
                }
            }
            .bottom{
                margin-top: 420px;
                width: 1188px;
                display: flex;
                justify-content:flex-start;
                align-items: center;
                .two{
                    width: 72px;
                    height: 16px;
                }
                .ico{
                    width: 156px;
                    display: flex;
                    justify-content: space-between;
                    margin-left: 445px;
                    ico1:hover:after{
                        content:attr(data-tooltip);
                        background: black;
                        color: white;

                        border-radius: 5px;
                        width: 50px;

                    }

                }
            }
        }
        .enter{
            width: 100%;
            height: 970px;
            background:
                    url("../assets/img/enterImg/blue.png") no-repeat bottom left,
                    url("../assets/img/enterImg/yello.png") no-repeat top right,
                    radial-gradient(circle, #3F5767 0%, #202C34 100%) ;
            opacity: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            div{
                display: flex;
                align-items: center;
                height: 84px;
            }
            .middle{
                width: 1200px;
                height: 800px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .title2{
                    margin-top: 184px;
                    align-self: flex-start;
                    width: 834px;
                    height: 36px;
                    animation-duration:2s;
                }
                .middle-box{
                    display: flex;
                    flex-direction: column;
                    margin-top: 117px;
                    .middle-box-picture{
                        width: 1200px;
                        display: flex;
                        .middle-box-picture-img{
                            animate-duration: 5s;
                        }
                    }
                    .middle-box-words{
                        width: 1200px;
                        display: flex;
                    }
                }
            }
            .bottom{
                width: 1200px;
                .ico{
                    width: 192px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-left: 445px;
                }
            }
        }
    }

</style>
